<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>客户管理</el-breadcrumb-item>
      <el-breadcrumb-item>客户添加管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div align="center" class="d1">
        <div style="float: left">
          <el-button @click="goafter" type="info">返回上一级</el-button>
        </div>
        <h3 style="color: mediumblue">客户添加界面</h3>
      </div>
      <div class="d2" align="center">
        <el-button type="primary" @click="addLinkman">添加联系人</el-button>
      </div>
      <div class="d2">
        <el-form :rules="rules" :ref="ruleForm" :model="addForm" label-width="80px">
          <el-row :gutter="100">
            <el-col :span="11">
              <el-form-item label="客户编号" v-if="addForm.code==null" prop="bh">
                <el-input v-model="addForm.bh" ></el-input>
              </el-form-item>
              <el-form-item label="客户编号" v-if="addForm.code!=null">
                <el-input v-model="addForm.code"  readonly></el-input>
              </el-form-item>
              <el-form-item label="客户名称" prop="name">
                <el-input v-model="addForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="客户地址" prop="address">
                <el-input v-model="addForm.address"></el-input>
              </el-form-item>
              <el-form-item label="税率" prop="taxRate">
                <el-input v-model="addForm.taxRate"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="发票抬头" prop="invoiceTitle">
                <el-input v-model="addForm.invoiceTitle"></el-input>
              </el-form-item>
              <el-form-item label="发票类型" prop="invoiceType">
                <el-select v-model="addForm.invoiceType" placeholder="请选择发票类型">
                  <el-option label="普通发票" :value="0"></el-option>
                  <el-option label="特级发票" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="所属行业" prop="industry">
                <el-select v-model="addForm.industry" placeholder="请选择行业">
                  <el-option label="机械" :value="0"></el-option>
                  <el-option label="电子" :value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="合作时间" prop="cooperDate">
                <el-date-picker
                  v-model="addForm.cooperDate"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="描述">
                <el-input type="textarea" v-model="addForm.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <div align="center" style="float: right;width: 100%">
            <el-form-item>
              <div>
                <el-button type="primary" @click="addCustomer(ruleForm)">添加</el-button>
                <el-button @click="goafter">取消</el-button>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "Addcustomer",
    data() {
      return {
        addForm: {},
        bh:'',
        ruleForm: {},
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          bh: [
            {required: true, message: '请输入编号', trigger: 'blur'},
            {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
          ],
          invoiceTitle: [
            {required: true, message: '请输入发票抬头', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],
          address: [
            {required: true, message: '请输入地址', trigger: 'blur'},
            {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
          ],
          taxRate: [
            {required: true, message: '请输入税率', trigger: 'blur'},
            {type:"string",min: 1, max: 6, message: '长度在 1 到 5 个字符', trigger: 'blur'}
          ],
          industry: [
            {required: true, message: '请选择行业', trigger: 'change'}
          ],
          invoiceType: [
            {required: true, message: '请选择类型', trigger: 'change'}
          ],
          cooperDate: [
            { required: true, message: '请选择日期', trigger: 'change'}
          ],
        }
      };
    },
    methods: {
      goafter() {
        this.$router.go(-1)
      },
      addCustomer(ruleForm) {
        this.$refs[ruleForm].validate((valid)=>{
          if(valid){
            this.addForm.code=this.addForm.bh
            this.$http.post("/information/pi-customer/addOrUpdate", this.addForm).then((res) => {
              if (res.data.success) {
                this.$message.success(res.data.message)
                this.$confirm('是否继续添加, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  this.$router.go(0)
                }).catch(() => {
                  this.$router.push("/customer")
                });
              } else {
                this.$message.error(res.data.message)
                this.$router.go(0)
              }
            })
          }else{
            this.$message.error("验证不通过")
          }
        })
      },
      addLinkman() {
        this.$router.push("/addLinkman")
      },
      hx(id) {
        this.$http.post("/information/pi-customer/cxCotumer/" + id).then((res) => {//添加原材料
          if (res.data.success) {
            this.addForm = res.data.result
          } else {
            this.$message.error(res.data.message);
          }
        });
      }
    },
    mounted() {
      let id = this.$route.query.id
      if (id != null) {
        this.hx(id)
      }
    }
  }
</script>

<style scoped>
  .d1 {
    border-bottom: 1px solid #333744;
  }

  .d2 {
    margin: 20px
  }
</style>
